import Description from '@/components/Description';
import { emsControllerConfigControllerCommConfig } from '@/services/ess/emsControl';
import { DescriptionsItemType } from 'antd/es/descriptions';
import React, { useEffect, useState } from 'react';
import { useIntl, useLocation } from 'umi';
import Styles from './emsCtronller.less';

interface CommunicationParams {
  deviceCode: string;
  devicePlatformCode: string;
  brokerIp: string;
  brokerPort: string;
  clientId: string;
  certStoragePath: string;
}

const EmsControllerCommunication: React.FC = () => {
  const intl = useIntl();
  const { stationName } = JSON.parse(sessionStorage.getItem('SiteConfigurationParams') || '{}');
  const [communicationData, setCommunicationData] = useState<CommunicationParams>({
    deviceCode: 'N/A',
    devicePlatformCode: 'N/A',
    brokerIp: 'N/A',
    brokerPort: 'N/A',
    clientId: 'N/A',
    certStoragePath: 'N/A',
  });

  // 获取URL中的参数
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const id = searchParams.get('id');
  const deviceCode = searchParams.get('deviceCode') || 'N/A';
  const devicePlatformCode = searchParams.get('devicePlatformCode') || 'N/A';

  // 获取通信参数数据
  useEffect(() => {
    const fetchCommunicationData = async () => {
      if (!id) return;

      try {
        const response = await emsControllerConfigControllerCommConfig({ lcId: Number(id) });
        if (response.success && response.data) {
          setCommunicationData({
            deviceCode: deviceCode, // 使用URL参数中的值
            devicePlatformCode: devicePlatformCode, // 使用URL参数中的值
            brokerIp: response.data.brokerIp || 'N/A',
            brokerPort: response.data.brokerPort || 'N/A',
            clientId: response.data.clientId || 'N/A',
            certStoragePath: response.data.certStoragePath || 'N/A',
          });
        }
      } catch (error) {
        console.error('Failed to fetch communication data:', error);
      }
    };

    fetchCommunicationData();
  }, [id, deviceCode, devicePlatformCode]); // 添加依赖项

  // 当前站点信息
  const siteInfo = [
    {
      label: intl.formatMessage({ id: 'emsController.currentSite' }),
      children: stationName || 'N/A',
    },
  ];

  // 通信参数
  const communicationParams = [
    {
      label: intl.formatMessage({ id: 'emsController.communication.deviceCode' }),
      children: communicationData.deviceCode,
      contentStyle: { width: '400px' },
    },
    {
      label: intl.formatMessage({ id: 'emsController.communication.platformCode' }),
      children: communicationData.devicePlatformCode,
      contentStyle: { width: '400px' },
    },
    {
      label: intl.formatMessage({ id: 'emsController.communication.brokerIp' }),
      children: communicationData.brokerIp,
      contentStyle: { width: '400px' },
    },
    {
      label: intl.formatMessage({ id: 'emsController.communication.brokerPort' }),
      children: communicationData.brokerPort,
      contentStyle: { width: '400px' },
    },
    {
      label: intl.formatMessage({ id: 'emsController.communication.clientId' }),
      children: communicationData.clientId,
      contentStyle: { width: '400px' },
    },
    {
      label: intl.formatMessage({ id: 'emsController.communication.cert' }),
      children: communicationData.certStoragePath,
      contentStyle: { width: '400px' },
    },
  ];

  const itemStyle = {
    labelStyle: { width: '120px' },
    contentStyle: { width: '120px' },
  };

  return (
    <div className={Styles['ems-controller-communication']}>
      <h2 className={Styles['ems-controller-title']}>
        {intl.formatMessage({ id: 'emsController.communication.title' })}
      </h2>
      <div className={Styles['ems-controller-site-info']}>
        <Description
          items={siteInfo as unknown as DescriptionsItemType[]}
          style={{ width: '400px' }}
        />
      </div>
      <div className={Styles['ems-controller-communication-content']}>
        <h3>{intl.formatMessage({ id: 'emsController.communication.mqttInfo' })}</h3>
        <Description
          items={communicationParams as unknown as DescriptionsItemType[]}
          column={2}
          labelStyle={itemStyle.labelStyle}
          contentStyle={itemStyle.contentStyle}
        />
      </div>
    </div>
  );
};

export default EmsControllerCommunication;
